<template>
  <div class="cart">
      <Vheader title="确认订单"></Vheader>
      <div class="play">
        
      </div>
      <div class="list-wrapper" ref="listWrapper">
        <div class="list-container">
          <section class="address">
            <p class="flex_style" v-if="showaddress" @click="add_address()">
              <span>
                <span class="iconfont icon-right">+</span>
                <span>填写收货地址</span>
              </span>
              <span class="iconfont icon-right">

              </span>
            </p>
            <div class="address_con flex_style" v-if="!showaddress" @click="show_address()">
              <span class="iconfont icon-weizhi" style="line-height: 60px;font-size:24px;width: 10vw;">
                
              </span>
              <span style="width: 70vw">
                <p><span>收货人:{{address.userName}}</span><span>电话:{{address.mobile}}</span></p>
                <p>收货地址: {{provincename}} {{cityname}} {{name}} {{address.address}}</p>
              </span>
              <span class="iconfont icon-right" style="line-height: 60px;width: 10vw;text-align: center;">
                  
              </span>
            </div>
          </section>
          <section class="box">
            <ul class="main">
              <li class="goods_img">
                <img :src="list.img" alt="">
              </li>
              <li class="goods_con">
                <p class="title">{{list.name}}</p>
                <p class="leval"><span v-for="attr in list.shuxin">{{attr}}</span></p>
                <p class="price_num"><span class="price">￥{{list.price}}</span><span class="num">×{{list.count}}</span></p>
              </li>
            </ul>
            <p class="flex_style" style="margin-top: 6px;"><span>运输方式</span><span>快递</span></p>
            <p class="flex_style"><span>运费</span><span :class="{ priceStyle: fee != 0}">￥{{fee}}</span></p>
            <p class="flex_style" @click="redEnvelopes()"><span>优惠券</span><span :class="{ priceStyle: money != 0}">-￥{{money}}</span></p>
            <p class="flex_style">
              <span>
              <a @click="yue" :class="{checked:ischecked}"></a>余额抵扣</span><span :class="{ priceStyle: showdiscount != 0}">-￥{{showdiscount}}</span>
            </p>
          </section>
        </div>
      </div>
      <p class="now_buy flex_style">
          <span>
            合计：<b>￥{{list.price*list.count + fee - alldiscount}}</b>
          </span>
          <button @click="buyNow()">立即购买</button>
        </p>
  </div>
</template>

<script>
import Vheader from '../../components/header.vue'
import axios from '../../axios/axios'
import vFooter from '@/components/footer'
import BScroll from 'better-scroll';
export default {
  name: 'cart',
  data () {
    return {
      list:[],
      allprice:0,
      showaddress:true,
      address:{},
      provincename:'',
      cityname:'',
      name:'',
      orderList:[],
      fee:0,
      feedata:[],
      discount:{},
      id:'',
      money:0,
      yongjin:0,
      qiandao:0,
      fanli:0,
      ischecked:false,
      alldiscount:0,
      showdiscount:0,
    }
  },
  components: {
    vFooter,
    Vheader,
  },
  mounted: function(){
    var  that=this;
    that.list=JSON.parse(sessionStorage.getItem('nowBuy'))
    if(that.list){
    }else{
      that.$router.push('/show');
    }
    console.log(that.list)


    var data=JSON.stringify({
            "actionName": "queryListPage",
            "controllerName": "userHarvestAddress",
            "data": [{
              "isDefault": true
            },
            1,
            10]
        });
  axios.post({
      data: data,
      callback(res) {
        // console.log(res.data.data.address)
        var addressList = res.data.data.address;
        for (var i = 0; i < addressList.length; i++) {
          if(addressList[i].isDefault){
            that.address=addressList[i];
            that.provincename=addressList[i].regions.provincename;
            that.cityname=addressList[i].regions.cityname;
            that.name=addressList[i].regions.name;
            console.log(that.address.addressId)
            //计算运费
            var datafee=JSON.stringify({
                      "actionName": "getGiveTemplate",
                      "controllerName": "systemGiveTemplate",
                      "data": [{
                        "addressId": that.address.addressId,
                        "productIds": [{"count": that.list.count,"productId": that.list.productId}],
                      }]
                  });
            axios.post({
                data: datafee,
                callback(res) {
                  console.log(res.data)
                  var feeprice=res.data.data.template;
                  console.log(feeprice)
                  for(var item in feeprice){
                    that.fee+=feeprice[item].weight.amount;
                  }
                }
              })
          }
        }
        if(res.data.data.address.length==0){
          that.showaddress=true;
        }else{
          that.showaddress=false;
        }
      }
    });
    //计算折扣
    var datadiscount=JSON.stringify({
              "actionName": "findMyByUserId",
              "controllerName": "userBalance",
              "data": [{
              }]
          });
    axios.post({
        data: datadiscount,
        callback(res) {
          console.log(res.data.data.data)
          var zhekou=res.data.data.data;
          that.discount=res.data.data.data;
          that.showdiscount=zhekou.commission-zhekou.useCommission+zhekou.sign-zhekou.useSign+zhekou.back-zhekou.useBack;
          // that.yongjin=zhekou.commission-zhekou.useCommission;
          // that.qiandao=zhekou.sign-zhekou.useSign;  
          // that.fanli=zhekou.back-zhekou.useBack;
        }
      })
  },
  methods:{
    yue: function(){
      if(this.ischecked){
        this.ischecked=false;
        this.fanli=0;
        this.qiandao=0;
        this.yongjin=0;
        this.alldiscount=0;
      }else{
        this.ischecked=true; 
        this.yongjin=this.discount.commission-this.discount.useCommission;
        this.qiandao=this.discount.sign-this.discount.useSign;  
        this.fanli=this.discount.back-this.discount.useBack;
        this.alldiscount=this.yongjin+this.qiandao+this.fanli;
      }
    },
    buyNow:function(){
      var that=this;
      var data=JSON.stringify({
            "actionName": "createOrder",
            "controllerName": "orderPay",
            "data": [{
              "addressId": this.address.addressId,
              "orderInfoList": [{
                "count": this.list.count,
                "keyId": this.list.keyId,
                "productId": this.list.productId,
              }],
              "orderType": "shopping",
              "payAmount": this.list.price*this.list.count+this.fee-this.alldiscount,
              "paySource": "wap",
              "payType": "alipay",
              "shopType": "product"
            },
            1]
        });
  axios.post({
      data: data,
      callback(res) {
        console.log(res.data)
        $('.play').html(res.data.data.order)
        // sessionStorage.clear();
        // that.$router.push('/order');
      }
    });
    },
     add_address:function(){
      this.$router.push('/address');
    },
    show_address:function(){
      this.$router.push('/showaddress');
    },
    redEnvelopes:function(){
      this.$router.push({path: '/redEnvelopes', query: {id: '1'}});
    }
  },
  computed:{
    
  },
}
</script>
<style lang="scss" scoped>
@import "../../common/style/public";
.cart{
  .list-wrapper {
    width: 100%;
    height: calc(100% - 89px);
    position: absolute;
    top: 40px;
    bottom: 49px;
    overflow: hidden;
    margin-bottom: 49px;
    .list-container {
      width: 100%;
      .address{
          width: 92vw;padding: 4vw;background-color: #fff;margin-top:6px;color:#000;font-size: 14px;
          .flex_style{

          }
          .address_con{
              p{
                height:24px;line-height: 24px;
                span{
                  margin-right: 26px;
                }
              }
          }
        }
        .box{
            background-color: #f5f5f5;padding-bottom: 60px;
            .main{
              margin-top: 6px;
              background-color: #fff;display: flex;justify-content: space-between;
              height: 30vw;padding: 2vw 2vw;
              .goods_img{
                width: 30vw;height:30vw;
                img{
                  width: 100%;height:100%;
                }
              }
              .goods_con{
                width: 62vw;height: 100%;padding: 0 1vw;
                .title{
                  font-size: 14px;
                  width:100%;
                  overflow : hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp:2;
                  -webkit-box-orient: vertical;
                  margin-top: 6px;
                }
                .leval{
                  font-size: 14px;color: gray;height: 12vw;line-height: 12vw;
                }
                .price_num{
                  display: flex;justify-content: space-between;
                  .price{color: red;}
                }
                .num{color: gray;font-size: 14px;margin-right: 8px;}
              }
            }
            .flex_style{
              background-color: #fff;margin-bottom: 1px;height:10vw;line-height: 10vw;padding: 0 4vw;color: gray;
            }
            p{
              .priceStyle{
                  color: red;
                }
              span{
                a{
                  display: inline-block;width: 16px;height:16px;border-radius: 50%;border: 1px solid #e3e3e3;position: relative;top: 3px;margin-right: 6px;
                }
              }
            }
        }
    }
  }
  
  .now_buy{
    position: fixed;bottom: 0;left: 0;height: 49px;line-height: 49px;width: 100%;background-color: #fff;border-top: 1px solid #e3e3e3;
    span{
      padding: 0 4vw;font-size: 14px;color: gray;
      b{
        color: red;font-weight: 500;
      }
    }
    button{
      height:100%;padding: 0 6vw;
      font-size: 16px;color: #fff;
      border:none;
      background-image:-webkit-linear-gradient(to right, #FFB90F, #FFA54F);
      background-image:linear-gradient(to right,#FFB90F, #FFA54F);
    }
  }
  .checked {
    background-image: url("../../common/img/check.png");
    background-size: 100% 100%;
  }
}
</style>







